<template>
  <div class="c-bg-white">
    <!-- <share-masker :isShowShare="isShowShare" v-if="isShowShare" @closeShare="isShowShare=false;"></share-masker> -->
    <div class="c-w100 c-hh90 c-flex-row c-justify-sb c-aligni-center c-bg-white c-ph24" v-if="isShowNotice == 1 && isOverStock == 0">
      <div class="c-fs24 c-fc-sblack">开启后将获得课程上课消息通知</div>
      <div class="c-ww80 c-hh34 c-br20 c-p" :class="changeNoticeStatus == 1?'theme-bg':'c-bg-f2'" @click="goFocus()">
        <div class="c-ww44 c-hh44 c-bg-white c-pa c-brp50 c-p-bm4" :class="changeNoticeStatus == 1?'c-p-l41':'c-p-lm4'" style="box-shadow:0px 1px 6px 0px rgba(179,179,179,0.36);"></div>
      </div>
    </div>
    <div class="c-flex-column c-aligni-center c-justify-center c-pv30 c-bg-white" :class="isOpenNotice ? 'c-mb16' : '' ">
      <template v-if="isOverStock == 0">
        <div class="c-ww240">
          <img src="../../../public/i/wap/edu/signUpSuccess.png" class="c-w100">
        </div>
        <div class="c-fs30 c-fc-xblack c-mt30 c-pl10">报名成功！</div>
        <div class="c-fs26 c-fc-gray c-mt30 c-pl10">恭喜您！我们会尽快与您联系！</div>
        <div class="c-ww240 c-hh64 theme-bg-gradient c-br40 c-fc-white c-fs28 c-flex-row c-aligni-center c-justify-center c-mt40" @click="handleClickCourses">查看报名课程</div>
        <div class="c-fs28 c-mt30 c-pb20 c-textAlign-c c-w70 c-flex-row c-justify-center">
          <div class="theme-fc c-text-decoration-underline" @click="goOrder">查看我的已购</div>
        </div>
      </template>
      <template v-else-if="isOverStock == 1">
        <div class="c-ww240">
          <img :src="require('@/assets/i/wap/activity/noStock.png')" class="c-w100">
        </div>
        <div class="c-fs30 c-fc-xblack c-mt30 c-pl10">库存不足，报名失败！</div>
        <div class="c-ww240 c-hh64 theme-bg-gradient c-br40 c-fc-white c-fs28 c-flex-row c-aligni-center c-justify-center c-mt40" @click="handleClickDetail()">查看课程</div>
        <div class="c-m-0auto c-ww240 c-br30 c-hh64 c-flex-row c-flex-center theme-bd1 theme-fc c-fs26 c-mt28 c-mb64" @click="handleClickEdulist()">看看类似课程</div>
      </template>
    </div>
    <div class="c-flex-column c-aligni-center c-pv30 c-bg-white c-bd-t10-f5" v-if="isOpenNotice && isOverStock == 0">
      <div class="c-fs30 c-fc-xblack c-mt20">{{attentionCase}}</div>
      <div class="c-fs28 c-fc-gray c-mt30">{{attentionTitle}}</div>
      <div class="c-ww200 c-maxh210 c-text-hidden c-mt20">
        <img :src="$addXossFilter(attentionCode, require('@/assets/activity_defult.png'))" class="c-ww200 c-maxh210">
      </div>
      <div class="c-fs24 c-fc-gray c-mt20">长按二维码，识别并关注</div>
    </div>
    <div class="masker" v-if="isShowMasker" @click="closeMasker"></div>
    <div class="c-pf c-p-b0 c-p-l0 c-textAlign-c c-bg-white c-w100 c-br-tr10 c-br-tl10 c-pz1000" v-if="isShowRemindBox">
      <div class="iconfont c-pa c-p-r24 c-p-t24 c-fc-sgray c-fs20" @click="closeRemindBox">&#xe8fd;</div>
      <div class="c-mt30 c-fs28">关注公众号</div>
      <div class="c-mt80 c-fc-gray c-fs28">二维码标题二维码标题二维码标题</div>
      <div class="c-mt30 c-ww200 c-maxh210 c-text-hidden c-mlr-auto">
        <img :src="$addXossFilter(qrcode, require('@/assets/activity_defult.png'))" alt="" class="c-ww200 c-maxh210">
      </div>
      <div class="c-mt20 c-mb64 c-fc-gray">长按二维码，识别并关注</div>
    </div>

  </div>
</template>

<script>
import { utilJs } from "@/utils/common";
// import shareMasker from "@/components/templates/common/shareMasker.vue";
let isClick = "";
export default {
  name: 'SignUpSuccess',
  components: {
    // shareMasker,
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      isOpenNotice: false, // 是否开启通知,
      id: "",
      attentionCase: '',
      attentionCode: '',
      attentionTitle: '',
      isShowShare: false,
      getInfo: {},
      orderId: "",
      studentCourseId: "",
      studentId: "",
      isShowNotice: "",
      isShowMasker: false,
      isShowRemindBox: false,
      qrcode: "",
      changeNoticeStatus: "",
      isOverStock: 0, // 0为正常的单子，1为库存失败
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    handleClickDetail() {
      this.$routerGo(this, "push", {
        path: "/edu/eduDetail",
        query: {
          id: this.id
        }
      })
    },
    handleClickEdulist() {
      this.$routerGo(this, "push", {
        path: "/edu/eduList",
      })
    },
    // 查看报名课程
    handleClickCourses() {
      this.$routerGo(this, "push", {
        path: "/edu/courseDetail",
        query: {
          scid: this.studentCourseId,
          saleCourseId: this.id,
          courseId: this.getInfo.courseId,
          studentId: this.studentId
        }
      })
    },
    goOrder() {
      this.$routerGo(this, "push", {
        path: "/member/myOrder/allOrderList",
      })
    },
    // 获取studentCourseId
    getCourseId() {
      utilJs.getMethod(global.apiurl + "educationSystem/studentCourse/order/" + this.orderId, res => {
        this.studentCourseId = res.studentCourseId;
        this.studentId = res.studentId;
        this.isOverStock = res.isOverStock;
        if (this.isOverStock == 0) {
          this.getShowNotice();
        }
      });
    },
    //课程是否显示提醒开关
    getShowNotice() {
      utilJs.getMethod(global.apiurl + "educationSystem/studentCourse/" + this.studentCourseId + "/isShowNotice", res => {
        this.isShowNotice = res.isShowNotice;
         // 后台开启是否显示面授课开关,才去提醒获取状态
        if (res.isShowNotice == 1) {
          this.getRemindStatus();
        }
      });
    },
    // 关闭提醒  获取提醒
    getRemindStatus() {
      utilJs.getMethod(global.apiurl + "educationSystem/studentCourse/" + this.studentCourseId + "/showNoticeStatus", res => {
        isClick = false;
        this.changeNoticeStatus = res.showNotice;
      })
    },
    goFocus() {
      if (isClick) {
        return
      }
      isClick = true;
      this.changeNoticeStatus = this.changeNoticeStatus == 1 ? -2 : 1;
      utilJs.postMethod(global.apiurl + "educationSystem/studentCourse/switchNoticeStatus", { studentCourseId: this.studentCourseId, noticeStatus: this.changeNoticeStatus }, res => {
        isClick = false;
        if (res.isFollowedMp == 0 && res.noticeStatus == -2) {
          // 未关注且开启提醒 显示二维码用户去关注
          utilJs.postMethod(global.apiurl + "educationSystem/studentCourse/getMpQrCodeWithParams", { studentCourseId: this.studentCourseId, noticeStatus: this.changeNoticeStatus }, res => {
            this.isShowMasker = true;
            this.isShowRemindBox = true;
            this.qrcode = res.qrcode;
          })
        }
      })
    },
    getNotice() {
      utilJs.getMethod(global.apiurl + "educationSystem/saleCourse/" + this.id, res => {
        this.getInfo = res;
        this.isOpenNotice = res.guideAttentionBtn;
        //如果开启通知 获取标题 二维码 等信息
        if (this.isOpenNotice) {
          this.attentionCase = res.attentionCase;
          this.attentionCode = res.attentionCode;
          this.attentionTitle = res.attentionTitle;
        }
        this.wechatShare();
      });
    },
    // goShare() {
    //   this.isShowShare = true;
    // },
    //分享
    wechatShare: function () {
      let title = this.getInfo.saleCourseName;
      let shareImg = this.getInfo.image;
      let shareUrl = window.location.href.split("#")[0] + '#/edu/eduDetail?id=' + this.getInfo.id + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = this.getInfo.introduction;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.getInfo.saleCourseName;
      let shareImg = this.getInfo.image;
      let shareUrl = window.location.href.split("#")[0] + '#/edu/eduDetail?id=' + this.getInfo.id + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = this.getInfo.introduction;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  activated() {
    setDocumentTitle("报名成功");// eslint-disable-line
    this.orderId = this.$route.query.orderId;
    isClick = "";
    this.studentCourseId = "";
    this.changeNoticeStatus = "";
    this.isShowNotice = "";
    this.qrcode = "";
    this.isShowRemindBox = false;
    this.isShowMasker = false;
    this.isOpenNotice = false;
    this.isShowShare = false;
    this.getInfo = {};
    this.id = this.$route.query.id;
    this.attentionCase = '';
    this.attentionCode = '';
    this.attentionTitle = '';
    this.isOverStock = 0;
    this.getNotice();
    this.getCourseId();
  },
  deactivated() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.c-p-bm4{
  bottom: -0.1rem;
}
.c-p-l41{
  left: 1.025rem;
}
.c-p-lm4{
  left: -0.1rem;
}
</style>
